<template>
<div class="color-picker" v-on-click-away="hide">
  <div class="color-input" :class="{active:show}" @click="show=true">
    <span class="current-color" :style="{background: value}"></span>
    <i class="iconfont drop-icon" :class="{drop:show}">&#xe606;</i>
  </div>
  <div v-show="show" class="color-drop">
    <span @click="colorPicker(item)" class="color-item" v-for="(item,key) in colorList" :style="{backgroundColor:item}" :class="{ active: value == item }" ></span>
  </div>
  <input class="hidden-input" type="text">
</div>
</template>

<script>
  import { directive as onClickAway } from 'vue-clickaway';
    export default {
      name: 'colorPicker',
      directives: {
        onClickAway: onClickAway,
      },
      props:{
        value:{
          type:String,
          default:'#ddd'
        },
        colorList:{
          type:Array,
          default:function () {
            return [
              '#00EDDD','#00CEC0','#009AFF','#3E82F7'
              ,'#FFBC0B','#FF8E50','#FF7123','#FE2619',
              '#78D000','#31BC2E','#5FA500','#538E02',
              '#918EFF','#736FFF','#4C47FF','#741DBF'
            ]
          }
        }
      },
      created(){

      },
      data () {
        return{
          show:false
        }
      },
      computed:{

      },
      methods:{
        colorPicker(color){
          this.$emit('input',color);
          this.show = false;
        },
        hide(){
          this.show = false;
        }
      }
    }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  @import "src/assets/css/variable.scss";
  .color-picker{
    position: relative;
    width: 82px;
    .color-input{
      position: relative;
      width: 82px;
      height: 30px;
      background: #FFFFFF;
      border-radius: 3px;
      padding: 0 10px;
      border: 1px solid $baseBorderColor;
      &.active{
        border: 1px solid #76C9FF;
        box-shadow: 0 0 2px 0 #009AFF;
      }

      .current-color{
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 6px 0;
        border-radius: 2px;
      }
      .drop-icon{
        position: absolute;
        right: 5px;
        top:0;
        vertical-align: middle;
        color:#9ea7b4;
        transition: all .3s;
        transform: rotate(180deg);
        font-size: 14px;
        &.drop{
          transform: rotate(0);
        }
      }
    }
    .color-drop{
      position: absolute;
      top:33px;
      left:0;
      width: 112px;
      height: 112px;
      line-height: 20px;
      background: #FFFFFF;
      border: 1px solid #DEE7EB;
      box-shadow: 0 0 2px 0 rgba(0,0,0,0.10);
      border-radius: 2px;
      z-index: 101;
      padding: 8px 0 0 8px;
      .color-item{
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 0 7px 2px 0;
        &:hover,&.active{
          &:before{
            content: "";
            position: absolute;
            top:1px;
            left: 1px;
            width: 16px;
            height: 16px;
            border: 1px #fff solid;
          }
        }
      }
    }
    .hidden-input{
      display: none;
      width: 0;
      height: 0;
    }
  }
</style>
